<template>
  <view class="medal-banner">
    <image
      src="/static/images/index/medal.png"
      class="medal-banner-image"
    />
    <view class="medal-banner-info">
      <view class="medal-banner-info-title">还差1杯得【有点奶檬】徽章</view>
      <view class="medal-banner-info-progress">
        <view class="medal-banner-info-progress-bar"></view>
        <view class="medal-banner-info-progress-value">0/1</view>
      </view>
      <view class="medal-banner-info-countdown">
        <text>距活动结束：</text>
        <uni-countdown
          :day="10"
          :hour="10"
          :minute="51"
          :fontSize="12"
          :showColon="false"
          color="#333"
          splitorColor="#aaaaaa"
        />
      </view>
    </view>
    <button class="medal-banner-button">马上点亮</button>
  </view>
</template>

<script>
export default {
  name: "MedalBanner"
}
</script>

<style lang="scss" scoped>
.medal-banner {
  background: linear-gradient(to left, #ffeef1, #fff);
  background-color: #fff;
  border-radius: $uni-border-radius-xl;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: $uni-spacing-row-xxl $uni-spacing-row-lg;

  &-image {
    width: 100rpx;
    height: 100rpx;
    margin-right: $uni-spacing-row-base;
  }

  &-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    &-title {
      font-size: $uni-font-size-lg;
      color: $uni-text-color;
      font-weight: 500;
      margin-bottom: $uni-spacing-row-base;
    }

    &-progress {
      display: flex;
      align-items: center;
      margin-bottom: $uni-spacing-row-base;
      margin-right: $uni-spacing-row-lg;
      &-bar {
        flex: 1;
        height: 10rpx;
        background-color: $uni-color-primary-light;
        border-radius: 10rpx;
      }
      &-value {
        font-size: $uni-font-size-xs;
        color: $uni-color-primary;
        margin-left: $uni-spacing-row-sm;
      }
    }

    &-countdown {
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
    }
  }

  &-button {
    color: #fff;
    font-size: $uni-font-size-sm;
    padding: $uni-spacing-row-xs $uni-spacing-row-base;
    border-radius: 40rpx;
    height: 40rpx;
    background-color: $uni-color-primary;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
